<template>
 <!-- 键盘开始 -->
<div class="keyboard" >
    <table >
        <tr>
            <td @click="addToInput('1')">1</td>
            <td @click="addToInput('2')">2</td>
            <td @click="addToInput('3')">3</td>
            <td @click="delInputVal()">
            <div class="k-img">
                    <img src="./img/delete.png" />
                </div>
            </td>
        </tr>
        <tr>
            <td @click="addToInput('4')">4</td>
            <td @click="addToInput('5')">5</td>
            <td @click="addToInput('6')">6</td>
            <td rowspan="3" class="r-btn"  v-bind:class="{ rBg: clickAble}" @click="confirm()">
                <div>确认</div>
                <div>支付</div>
            </td>
        </tr>
        <tr>
            <td @click="addToInput('7')">7</td>
            <td @click="addToInput('8')">8</td>
            <td @click="addToInput('9')">9</td>
        </tr>
        <tr>
            <td >
                <div class="r-img">
                    <img src="./img/keyboard.png" />
                </div>
            </td>
            <td @click="addToInput('0')">0</td>
            <td @click="addToInput('.')">
                <div class="r-dot"></div>
            </td>
        </tr>
    </table>
</div>
<!-- 键盘结束 -->    
</template>
<script>
export default {
  data() {
    return {
      clickAble: false
    };
  },
   props:{
      inputVal: {//输入框值
        type: String,
        default: ''
      },
      limitVal:{  //最低金额
        type: Number,
        default: 0
      },
      confirmPay:{//确认支付
        type:Function,
        default:function(){}
      }
    },
  methods: {
    //输入
    addToInput(num) {
      let that = this;
      let newNum = num;
      let newInput = that.inputVal;
      //that.$emit('setInputVal', newInput);
      //判断第一位是否为数字
      if (newInput.length == 0) {
        if (newNum == ".") {
          this.clickAble = false;
          return false;
        }
      }
      //不是小数时候，第一位为0情况
      if (newInput.length == 1) {
        if (newInput == "0" && newNum != ".") {
          return false;
        }
      }
      //保留两位数及防止.多输入
      if (newInput.indexOf(".") > 0) {
        if (newNum == ".") return false;
        if (newInput.length > 2) {
          if (newInput.length - newInput.indexOf(".") > 2) {
            return false;
          }
        }
      }
      //赋值
      newInput += newNum;
      //不能输入
      if (
        newInput != "0" &&
        newInput != "0." &&
        newInput != "0.0" &&
        newInput != "0.00"&&
        newInput>=that.limitVal
      ) {
        this.clickAble = true;
      }
      that.$emit('setInputVal',newInput);
    },
    //删除
    delInputVal() {
      let that = this;
      var str = that.inputVal + "";
      let newInputVal = str.substring(0, str.length - 1);
      that.$emit('setInputVal',newInputVal);
      if (!newInputVal) that.clickAble = false;
      if (newInputVal == "0" ||newInputVal == "0." ||newInputVal == "0.0" ||newInputVal == "0.00"||newInputVal<100) {
        that.clickAble = false;
      }
    },
    //确认
    confirm(){
      let that = this;
      if(that.clickAble){
        that.clickAble = false;
        that.confirmPay(function(){
          that.clickAble = true;
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.keyboard {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff;
  table {
    width: 100%;
    border: solid #eaeaea;
    border-width: 1px 0px 0px 1px;
    border-collapse: collapse;
    font-size: 6vw;
  }
  td {
    border: solid #eaeaea;
    border-width: 0px 1px 1px 0px;
    width: 25%;
    overflow: hidden;
    height: 18vw;
    text-align: center;
    vertical-align: middle;
  }
  .r-btn {
    color: #fff;
    background-color: #b4b4b4;
    font-size: 6vw;
    line-height: 12vw;
  }
  .rBg {
    background-color: #fe6d0a;
  }
  .r-dot {
    width: 2vw;
    height: 2vw;
    border-radius: 100%;
    background-color: #000;
    margin: 0 auto;
  }
  .k-img {
    width: 9vw;
    margin: 0 auto;
  }
  .k-img img {
    width: 100%;
  }
  .r-img {
    width: 7vw;
    margin: 0 auto;
  }
  .r-img img {
    width: 100%;
  }
}
</style>
